<template>
    <div class="reviewVerificationManage-workbench-content-box">
        <a-spin tip="正在加载中..." :spinning="spinning">
            <div style="height: calc(100vh - 110px);">
                <div class="sectionChief-content-box">
                    <div class="sectionChief-top-box">
                        <!-- 常用功能 -->
                        <div class="commonFunctions-box">
                            <div
                             v-for="(item,index) in moduleItem" :key="index"
                             class="toDoTasks-annual-for"
                             :id="index == 0?'toDoTasksAnnualFor0Id':''"
                             @click="addFormClick(item.addStr)"
                            >
                                <div class="at-y-icon" :class="'at-y-bg'+index"
                                :style="{width:elementToDoTasksAnnualFor == 1?'80px':'60%',height:elementToDoTasksAnnualFor == 1?'80px':(elementToDoTasksAnnualFor * 0.6)+'px'}"
                                >
                                    <ych-icon v-if="item.icon && item.icon.indexOf('spcy-icon') == -1" :type="item.icon" />
                                    <span v-else :class="'iconfont '+item.icon"></span>
                                </div>
                                <span class="at-y-title">{{ item.name }}</span>
                            </div>
                        </div>
                        <!-- 审评任务数量 -->
                        <div class="link-numberOfTasks-box" v-if="roleValue == 1">
                            <h3 class="title-h3" style="padding-left: 6px;" >OA内部事务任务数量</h3>
                            <!-- :style="{height:calendarHeight-50+'px',}" -->
                            <div style="height: calc(100% - 30px);" :id="containerXlId"></div>
                        </div>
                        <!-- 人员任务数量 -->
                        <div class="personnel-numberOfTasks-box" v-if="roleValue == 1">
                            <div style="display: flex;justify-content: space-between;">
                                <h3 class="title-h3" style="padding-left: 6px;" >科室人员具体任务数量</h3>
                                <a @click="moreRyrwsl">更多>></a>
                            </div>
                            <!-- <h3 class="title-h3" style="padding-left: 6px;" >本月科室人员具体任务数量</h3> -->
                            <div style="height: calc(100% - 30px);" :id="containerRYId"></div>
                        </div>
                    </div>
                    <div class="sectionChief-button-box">
                        <toDoListModal :occupancyHeight="calendarHeight"></toDoListModal>
                    </div>
                </div>

            </div>
        </a-spin>
        <RYRWSLModel ref="RYRWSLModelRef" />
        <handleModal ref="handleModalRef"></handleModal>
    </div>
</template>
<script>
import {
    spcyMyInfoverifyUserKsfzr,
    getbksHjmcRwl,
    getbksRyrwl,
} from './service/index'
import toDoListModal from '../daiBan/index.vue'
import moment from 'moment'
import RYRWSLModel from './RYRWSLModel.vue'
import handleModal from '../modal/handleModal.vue'
export default {
    components:{
        toDoListModal,
        RYRWSLModel,
        handleModal,
    },
    props:{

    },
    data(){
        return{
            roleValue:'1',
            spinning:false,
            menusList:[],
            elementToDoTasksAnnualFor:'',
            calendarHeight:(window.innerHeight - 100) / 2,
            containerXlId:'rwsl'+ new Date().getTime(),
            containerRYId:'rysl'+ new Date().getTime(),
            rwslList:[{
                value:0,
                name:'离岗请示',
                key:'OA_LGQS',
            },{
                value:0,
                name:'请休假',
                key:'OA_QXJ',
            },{
                value:0,
                name:'加班值班',
                key:'OA_JBZB',
            },{
                value:0,
                name:'行政事务审批',
                key:'OA_XZSWSP',
            },{
                value:0,
                name:'宣传信息审批',
                key:'OA_XCXXSP',
            },{
                value:0,
                name:'会议室申请',
                key:'OA_HYSSQGL',
            },{
                value:0,
                name:'办公用品申请',
                key:'OA_BGYPSQ',
            },{
                value:0,
                name:'出差审批',
                key:'NK_CCSP',
            }],
            yearData:moment().format('YYYY'),
            RYRWSLList:[],
            moduleItem: [
                {
                    'name':'请假申请',
                    'icon':'clock-circle',
                    'addStr':'请假',
                },{
                    'name':'离岗申请',
                    'icon':'logout',
                    'addStr':'离岗',
                },{
                    'name':'出差申请',
                    'icon':'credit-card',
                    'addStr':'出差',
                },{
                    'name':'加班值班',
                    'icon':'plus-circle',
                    'addStr':'加班',
                },{
                    'name':'行政事务审批',
                    'icon':'audit',
                    'addStr':'行政',
                },{
                    'name':'宣传信息审批',
                    'icon':'pic-right',
                    'addStr':'宣传',
                },{
                    'name':'办公用品领用',
                    'icon':'highlight',
                    'addStr':'办公用品',
                },{
                    'name':'会议室申请',
                    'icon':'home',
                    'addStr':'会议室',
                },
            ]

        }
    },
    computed: {
        menus(){
            //console.log(this.$store.state.user.modulemenuList)
            return this.$store.state.user.modulemenuList
        }
    },
    watch:{

    },
    mounted(){
        //console.log('拿到什么菜单',this.menus)
        if(this.menus.length){
            this.menus.forEach((item,index) => {
                if(item.meta){
                    if(item.children && item.children.length>0){
                        //console.log(item)
                        //console.log(item.meta.title)
                        if(item.meta.title == '待办任务'){
                            this.menusList.push(...item.children)
                            //console.log('菜单----',this.menusList)
                        }
                        item.children.forEach(trem=>{
                            if(trem.meta.title == '事项查询' || trem.meta.title == '等待办理队列' || trem.meta.title == '个人工作量统计'){
                                this.menusList.push(trem)
                            }

                        })
                    }
                }
            });

        }
        this.getSectionChief()
        this.$nextTick(()=>{
            setTimeout(()=>{
                let element = document.getElementById('toDoTasksAnnualFor0Id')
                this.elementToDoTasksAnnualFor = element?element.offsetWidth:''
                //console.log('this.elementToDoTasksAnnualFor',this.elementToDoTasksAnnualFor)
            },200)
        })




    },
    methods:{
        getSectionChief(){
            getbksHjmcRwl().then(res=>{
                if(res.code == 200){
                    //console.log('各科室环节数量',res)
                    this.rwslList = this.rwslList.map((item,index)=>{
                        return {...item,value:res.result[item.key]}
                    })
                    //console.log('各科室环节数量',this.rwslList)
                    this.getRwslData(this.rwslList)
                }else{

                }
            })
            getbksRyrwl().then(res=>{
                if(res.code == 200){
                    //console.log('人员获取倒是什么aaa',res)
                    this.RYRWSLList = JSON.parse(JSON.stringify(res.result))
                    let arr = []
                    if(res.result.length && res.result.length>=5){
                        res.result.forEach((item,index)=>{
                            if(index<=5){
                                arr.push(item)
                            }
                        })
                    }else{
                        arr = res.result
                    }
                    this.getRYData(arr)
                }else{

                }
            })
        },
        moreRyrwsl(){
            this.$refs.RYRWSLModelRef.getData(this.RYRWSLList)
            this.$refs.RYRWSLModelRef.visibleShow = true
        },
        getRwslData(list){
            let dataList = list.map(item=>{return {name:item.name,value:item.value}})
            var chartDom = document.getElementById(this.containerXlId);
            if(!chartDom) return false
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    // orient: 'vertical',
                    show:false,
                    left: 'center',
                    padding:[30,0,0,0],
                    textStyle: {
                        fontWeight: "bold",
                        fontSize: 16
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '60%',
                        startAngle: 70,
                        center: ['50%', '50%'],
                        itemStyle: {
                            borderRadius: 5,
                        },
                        data: dataList,
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        // itemStyle: {
                        //     normal: {
                        //     color: function (colors) {
                        //         var colorList = ['#ee6666','#fac858','#5470c6','#91cc75'];
                        //         return colorList[colors.dataIndex];
                        //     }
                        //     },
                        // },
                        label: {
                            formatter: '{b|{b}}\n{c}  {per|{d}%}  ',
                            backgroundColor: '#F6F8FC',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: '#6E7079',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#8C8D8E',
                                    width: '100%',
                                    borderWidth: 1,
                                    height: 0
                                },
                                b: {
                                    color: '#4C5058',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#fff',
                                    backgroundColor: '#4C5058',
                                    padding: [2, 2],
                                    borderRadius: 4
                                }
                            }
                        },
                    }
                ]
            };

            option && myChart.setOption(option);
            window.addEventListener("resize",()=> {
                myChart.resize();
            })
        },
        getRYData(list){
            let dataListX = list.map(item=>{return item.index})
            var chartDom = document.getElementById(this.containerRYId);
            if(!chartDom) return false
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: dataListX,
                    axisLabel: { interval: 0, rotate: -30 },
                },
                yAxis: {
                    type: 'value',
                    min:1,
                    minInterval:1,

                },
                series: [{
                    name: '总量',
                    type: 'bar',
                    label: {
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rotate:-90
                    },
                    data: list.length?list.map(item=>{return item.data.zsl}):[]
                },{
                    name: '已办',
                    type: 'bar',
                    label: {
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rotate:-90
                    },
                    data: list.length?list.map(item=>{return item.data.ybsl}):[]
                },{
                    name: '待办',
                    type: 'bar',
                    label: {
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rotate:-90
                    },
                    data: list.length?list.map(item=>{return item.data.dbsl}):[]
                }]
            };
            option && myChart.setOption(option);
            window.addEventListener("resize",()=> {
                myChart.resize();
            })
        },
        addFormClick(type){
            this.$nextTick(_ => {
                this.$refs.handleModalRef.addClick(type)
            })
        },
    }
}
</script>
<style lang="less">
.reviewVerificationManage-workbench-content-box{
    .title-h3{
        display: block;
        font-weight: 600;
        margin: 0;
        font-size: 18px;
    }
    //科室负责人
    .sectionChief-content-box{
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding: 8px;
        .sectionChief-top-box{
            padding: 0px 15px;
            height: 50%;
            display: flex;
            .commonFunctions-box{
                width: 40%;
                border: 1px solid #d9d9d9;
                margin-right: 8px;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                .toDoTasks-annual-for{
                    width: 25%;
                    // border: 1px solid red;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    justify-content: center;
                    .at-y-icon{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 70%;
                        // width: 80px;
                        // height: 80px;
                        background: #e4d329;
                        border-radius: 50%;
                        font-size: 30px;

                        color: #fff;
                        .iconfont{
                            font-size: 32px;
                        }
                    }
                    .at-y-title{
                        font-size: 16px;
                    }
                    .at-y-bg0{
                        background-color: #29e483;
                    }
                    .at-y-bg1{
                        background: #5077ee;
                    }
                    .at-y-bg2{
                        background: #50ccee;
                    }
                    .at-y-bg3{
                        background: #9c50ee;
                    }
                    .at-y-bg4{
                        background: #509aee;
                    }
                    .at-y-bg5{
                        background: #e45429;
                    }
                    .at-y-bg6{
                        background: #eeb450;
                    }
                    .at-y-bg7{
                        background: #e42970;
                    }
                    // .at-y2-bg8{
                    //     background: #e45429;
                    // }
                }
            }
            .link-numberOfTasks-box{
                width: 30%;
                border: 1px solid #d9d9d9;
                margin-right: 8px;
            }
            .personnel-numberOfTasks-box{
                flex: 1;
                border: 1px solid #d9d9d9;
            }
            .clerk-content-box{
                flex: 1;
                border: 1px solid #d9d9d9;
            }
        }
        .sectionChief-button-box{
            flex: 1;
        }
    }
    //科员
    .clerk-content-box{

    }
}
</style>
